<!doctype html>
<html>
<head>
<title>Eminent Login Form Flat Responsive widget Template :: xmoban.cn</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Eminent Login Form Widget Responsive, Login form web template,Flat Pricing tables,Flat Drop downs  Sign up Web Templates, Flat Web Templates, Login signup Responsive web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- font files -->
<link href='//fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<!-- /font files -->
<!-- css files -->
<link href="css/style.css" rel='stylesheet' type='text/css' media="all" />
<link href="layer/theme/default/layer.css">
<style type="text/css">
	#sex{
		padding: 10px;
		width: 100%;
		border: 1px solid rgba(30, 0, 41, 0);
		color: #fff;
		text-align: left;
		outline: none;
		letter-spacing: 1px;
		font-size: 16px;
		background-color: rgba(30, 0, 41, 0.57);
		margin-top: 1em;
		margin-bottom: 1em;
		font-weight: 600;
		font-family: 'Poiret One', cursive;
	}
</style>
<!-- /css files -->
</head>
<body>
<h1>学习资源后台管理</h1>
<div class="form-w3ls">
    <ul class="tab-group cl-effect-4">
        <li class="tab active"><a href="#signin-agile">登录</a></li>
		<li class="tab"><a href="#signup-agile">注册</a></li>        
    </ul>
    <div class="tab-content">
        <div id="signin-agile">   

				<p class="header">用户名</p>
				<input type="text" id="username" name="username" placeholder="帐号">
				
				<p class="header">密码</p>
				<input type="password" id="password" name="password" placeholder="密码">
				
				<input type="checkbox" id="brand" value="">
				<label for="brand"><span></span>记住我?</label>
				
				<input type="submit" class="sign-in" id = "signin" value="登录">
				
				<ul class="links">
					<li class="pass-w3ls"><a href="forgetpassword.html">忘记密码</a></li>
				</ul>
		</div>
		<div id="signup-agile">   

			<p class="header">手机号</p>
			<input type="tel" id="phone" name="phone" placeholder="请输入手机号码">

			<p class="header">密码</p>
			<input type="password" id="password1" name="password" placeholder="请输入密码">

			<p class="header">再次输入密码</p>
			<input type="password" id="password2" name="password2" placeholder="请再次输入密码">

			<p class="header">姓名</p>
			<input type="text" id="name" name="name" placeholder="请输入姓名">

			<p class="header">性别</p>
			<select id="sex" class="select" >
				<option value=""></option>
				<option value="男">男</option>
				<option value="女">女</option>
			</select>

			<p class="header">身份证号</p>
			<input type="text" id="userid" name="name" placeholder="请输入身份证号">

			<input type="submit" id="register" class="register" value="注册">
		</div>
    </div><!-- tab-content -->
</div> <!-- /form -->	  

<!-- js files -->
<script src='js/jquery.min.js'></script>
<script src="js/index.js"></script>
<script src="js/contextPath.js"></script>
<script src="layer/layer.js"></script>
<script type="text/javascript">
    $('#signin').on('click',function () {
        if($("#username").val() === ''){
            console.log("请输入用户名");
        }else if($("#password").val() === ''){
            console.log("请输入密码");
        }else {
            $.ajax({
                url: contextPath+"loginUser?username="+$("#username").val()+"&password="+$("#password").val(),
                contentType : "application/json; charset=utf-8",
                type: "POST",
                dataType: "json",
//                data:{'username':$("#username").val(),'password':$("#password").val()},
                success: function(data) {
                    if(data.message === "登录成功!"){
                        window.location.href='main.html';
                    }else{
                        layer.alert(data.message);
                        console.log("登录失败!");
                    }
                }
            });
        }
    });
    $('#register').on('click',function () {
        var jsons = {};
        jsons.phone = $("#phone").val();
        jsons.password = $("#password1").val();
        jsons.password2 = $("#password2").val();
        jsons.name = $("#name").val();
        jsons.sex = $("#sex").val();
        jsons.userid = $("#userid").val();
		$.ajax({
			url: contextPath+"learner/new",
            contentType : "application/json; charset=utf-8",
			type: "POST",
            dataType: "json",
			data:JSON.stringify(jsons),
			success: function(data) {
				console.log(data.message);
				if(data.message === "注册成功!"){
                    layer.alert(data.message);
				}else{
                    layer.alert(data.message);
					console.log("注册失败!");
				}
			}
		});
    });
</script>
<!-- /js files -->
</body>
</html>
